<template>
  <section>
    <el-row>
      <el-card>
        <el-col :span="24">
          <div class="table_content" style="margin-bottom: 1px">
            <el-row :gutter="4">
              <el-form
                :inline="true"
                label-position="left"
                class="demo-form-inline"
                label-width="100px"
              >
                <el-form-item>
                  <el-select v-model="searchDto.type" placeholder="请选择">
                    <el-option
                      v-for="item in signTypes"
                      :key="item.keyword"
                      :label="item.label"
                      :value="item.keyword"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <el-button
                    icon="el-icon-search"
                    type="primary"
                    @click="search"
                  >
                    查询
                  </el-button>
                </el-form-item>
                <el-form-item>
                  <el-button
                    icon="el-icon-s-open"
                    type="primary"
                    @click="clear"
                  >
                    重置
                  </el-button>
                </el-form-item>
                <el-form-item class="clear_item-margin-bottom">
                  <el-button
                    type="primary"
                    icon="el-icon-circle-plus"
                    @click="newButton"
                  >
                    新增模板签名
                  </el-button>
                </el-form-item>
              </el-form>
            </el-row>
          </div>
          <div class="table_content">
            <page-table
              ref="multipleSelection"
              :page-data="pageData"
              :loading="loading"
              :do-get-page-data="getSignTemplatePageList"
            >
              <el-table-column
                type="index"
                width="100px"
                align="center"
                label="序号"
              ></el-table-column>
              <el-table-column
                width="150px"
                prop="name"
                align="left"
                label="模板名称"
              ></el-table-column>
              <el-table-column
                prop="sign"
                label="签名"
                align="left"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  <img
                    :src="scope.row.sign"
                    alt=""
                    :style="{ width: '150px' }"
                  />
                </template>
              </el-table-column>
              <el-table-column
                prop="type"
                label="类型"
                align="center"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  {{ scope.row.type | keyText("SIGN_TYPE") }}
                </template>
              </el-table-column>
              <el-table-column
                prop="width"
                label="宽度"
                align="center"
                width="150px"
              ></el-table-column>
              <el-table-column
                prop="height"
                label="高度"
                width="150px"
                align="center"
              ></el-table-column>

              <el-table-column
                label="管理"
                width="200"
                align="center"
                fixed="right"
              >
                <template slot-scope="scope">
                  <el-tooltip content="编辑" placement="top">
                    <el-button
                      size="mini"
                      icon="el-icon-edit"
                      @click="editSignTemplate(scope.row)"
                    ></el-button>
                  </el-tooltip>
                  <el-tooltip content="删除" placement="top">
                    <el-button
                      size="mini"
                      icon="el-icon-delete"
                      @click="deleteSignTemplate(scope.row)"
                    ></el-button>
                  </el-tooltip>
                </template>
              </el-table-column>
            </page-table>
            <el-dialog
            :close-on-click-modal="false"
              :visible.sync="showButtonView"
              v-if="showButtonView"
              title="新增/编辑模板签名:"
              width="950px"
              @close="fail"
            >
              <el-form label-width="100px">
                <el-form-item label="模板名称">
                  <el-input v-model="formInfo.name"></el-input>
                </el-form-item>
              </el-form>
              <tag-input
                :defaultValue="curSign.sign"
                v-model="curSign.sign"
                :tag-type="tagTypes"
                fieldName="sign"
                :add-date="false"
              ></tag-input>
              <div slot="footer">
                <el-button type="primary" @click="saveSignTemplate">
                  确认
                </el-button>
                <el-button @click="fail">
                  取消
                </el-button>
              </div>
            </el-dialog>
          </div>
        </el-col>
      </el-card>
    </el-row>
  </section>
</template>
<script>
import { mapGetters } from "vuex";
export default {
  name: "signTemplate",
  created() {
    this.getSignTemplatePageList();
  },
  data() {
    return {
      signTypes: this.getDictionary("SIGN_TYPE"),
      tagTypes: ["hand_sign"],
      loading: false,
      showButtonView: false,
      searchDto: {
        pageSize: 10,
        pageIndex: "",
        type: ""
      },
      curSign: { sign: [] },
      formInfo: {
        sign: "",
        name: "",
        width: "",
        height: ""
      },
      pageData: {}
    };
  },
  computed: {
    ...mapGetters({
      buttonList: "buttonList"
    })
  },
  methods: {
    /**
     * 描述：获取模板签名列表
     * 时间： 2020/11/4
     */
    getSignTemplatePageList(val) {
      console.log(this.searchDto);
      let tem = Object.assign({}, this.searchDto, val);
      this.API.getSignTemplatePageList(tem).then(res => {
        this.pageData = res.data;
      });
    },
    /**
     * 描述：弹出新增签名模板
     * 时间： 2020/11/4
     */
    newButton() {
      this.formInfo = {
        sign: "",
        name: "",
        width: "",
        height: ""
      };
      this.curSign = { sign: [] };
      this.showButtonView = true;
    },

    /**
     * 描述：关闭弹窗
     * 时间： 2020/11/4
     */
    fail() {
      this.formInfo = {
        sign: "",
        width: "",
        height: ""
      };
      this.curSign = { sign: [] };
      this.showButtonView = false;
    },
    /**
     * 描述：编辑模板签名
     * 时间： 2020/11/4
     */
    editSignTemplate(row) {
      this.curSign.sign = [];
      this.API.getSignTemplateById({ id: row.id }).then(ret => {
        console.log(ret.data);
        this.formInfo = ret.data;
        this.curSign.sign.push({
          text: "", //存储文本信息
          sign: this.formInfo.sign, //存储base64图片信息或者中文签名
          date: "", //签名时间
          width: this.formInfo.width, //宽度
          height: this.formInfo.height, // 高度
          type: "hand_sign", //photo|hand_sign|template|text_and_sign|sign|text_sign
          userId: this.formInfo.userId, // "签名的用户ID"
          align: ""
        });
        console.log(this.curSign.sign);
        this.showButtonView = true;
      });
    },
    /**
     * 描述：保存模板签名
     * 时间： 2020/11/4
     */
    saveSignTemplate() {
      console.log(this.curSign.sign);
      if (
        this.curSign.sign &&
        this.curSign.sign.length > 0 &&
        this.curSign.sign[0].sign.length > 0
      ) {
        this.formInfo.type = "TEMPLATE";
        this.formInfo.sign = this.curSign.sign[0].sign;
        this.formInfo.width = this.curSign.sign[0].width;
        this.formInfo.height = this.curSign.sign[0].height;
        console.log(this.formInfo);
        this.API.addOrUpdateSignTemplate({ body: this.formInfo }).then(res => {
          this.$message({
            message: "操作成功",
            type: "success"
          });
          this.getSignTemplatePageList();
          this.fail();
        });
      } else {
        this.warning("请手写签名");
        return;
      }
    },
    /**
     * 描述：删除模板签名
     * 时间： 2020/11/4
     */
    deleteSignTemplate(row) {
      this.$confirm("确认删除当前模板签名?", "提示", {})
        .then(() => {
          let tem = {
            id: row.id
          };
          this.API.deleteSignTemplateById(tem).then(ret => {
            this.$message({
              message: "删除成功",
              type: "success"
            });
            this.getSignTemplatePageList();
          });
        })
        .catch(() => {});
    },
    //查询
    search() {
      this.getSignTemplatePageList();
    },
    //重置
    clear() {
      this.searchDto = {
        pageIndex: "",
        pageSize: 10,
        type: ""
      };
      this.getSignTemplatePageList();
    }
  },
  components: {}
};
</script>

<style scoped></style>
